<template>
  <div class="container">
    <button type="primary" @click="onSave()">保存</button>

    <!-- <super-flow :node-list="menuNodeList.nodeList" :draggable="false" ref="superFlow" :link-list="menuNodeList.linkList" class="menuFlow">
      <template v-slot:node="{ meta }">
        <div class="menu_node">{{meta.name}}</div>
      </template>
    </super-flow> -->
    <super-flow :node-list="nodeList.nodeList" :draggable="true" ref="superFlow" :link-list="nodeList.linkList" class="flow">
      <template v-slot:node="{ meta }">
        <div :class="`flow-node ellipsis flow-node-${meta.class}`">
          <div class="node_unit node_item">
            {{ meta.name }}
          </div>
          <div class="node_unit node_item">
            <span>{{meta.userName}}</span>
            <span>{{meta.state}}</span>
          </div>
          <div class="node_unit node_item">
            {{ meta.time }}
          </div>
          <div class="node_detail node_item cursor">
            详情
          </div>
        </div>
      </template>
    </super-flow>

  </div>
</template>

<script>
import { flowData } from "./data.js";
let boxWidth = 230;
let boxHeight = 116;
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      linkSetting: {
        desc: "",
      },
      nodeSetting: {
        name: "",
        desc: "",
      },

      origin: [10, 10],
      nodeList: {
        origin: [0, 0],
        nodeList: [],
        linkList: [],
      },
      menuNodeList: {
        origin: [0, 0],
        nodeList: [],
        linkList: [],
      },
    };
  },
  methods: {
    initNodeSign2() {
      let nodeList = [],
        linkList = [],
        totalX1 = 16,
        maxY = 0,
        this_ = this,
        totaly1 = 13;

      let lineHeight = totaly1 + boxHeight + 20; //步长高
      let lineWidth = totalX1 + boxWidth + 40; //步长宽
      let coodY = {};
      function getCHildren(arr, startId, level) {
        ++level;
        arr.forEach((item, i) => {
          let nodeId1 = `three__${this_.uuidv4()}`;
          coodY[level] = coodY[level] ? coodY[level] + lineHeight : totaly1;
          if (maxY >= coodY[level]) {
            coodY[level] = maxY + (i ? lineHeight : 0);
          }
          maxY = coodY[level];
          nodeList.push({
            id: nodeId1,
            width: boxWidth,
            height: boxHeight,
            coordinate: [totalX1 + lineWidth * (level - 1), coodY[level]],
            meta: {
              name: item.departmentName,
              state: item.signState > 0 ? 1 : 0,
              time: item.superviseTime,
              userName: item.signName,
              type: "feedback-sign",
            },
          });
          if (startId) {
            linkList.push({
              id: `_${this_.uuidv4()}`,
              startId: startId,
              endId: nodeId1,
              startAt: [totalX1 + boxWidth, 20],
              endAt: [0, 20],
              meta: null,
            });
          }
          if (item.children && item.children.length) {
            getCHildren(item.children, nodeId1, level);
          }
        });
      }
      getCHildren(flowData.signJsonData, "", 0);
      this.nodeList.nodeList = nodeList;
      this.nodeList.linkList = linkList;
    },
    initNodeFeedbackFn() {
      let nodeList = [],
        linkList = [],
        totalX1 = 16,
        this_ = this,
        totaly1 = 13;

      let lineHeight = totaly1 + boxHeight + 10; //步长高
      let lineWidth = totalX1 + boxWidth + 40; //步长宽
      let coodObjY = {};

      function getChildrenNode(arr, startId, level) {
        level++;
        arr.forEach((item, j) => {
          let nodeId1 = `three__${this_.uuidv4()}`;
          if (level <= 1) {
            // 只有第一级是递增 ，其余层级取上一层的第一个位置的y
            coodObjY[level] = coodObjY[level]
              ? coodObjY[level] + lineHeight
              : 16;
          }
          let index = nodeList.findIndex(
            (n) => n.meta.departmentId == item.departmentId
          );
          coodObjY[level + 1] = coodObjY[level];
          if (index >= 0) {
            nodeId1 = nodeList[index].id;
            coodObjY[level + 1] = nodeList[index].coordinate[1];
            linkList.push({
              id: `_${this_.uuidv4()}`,
              startId: startId,
              endId: nodeList[index].id,
              startAt: [totalX1 + boxWidth, 20],
              endAt: [0, 20],
              meta: null,
            });
          } else {
            if (level > 1) {
              coodObjY[level] = coodObjY[level] + j * lineHeight;
            }
            nodeList.push({
              id: nodeId1,
              width: boxWidth,
              height: boxHeight,
              coordinate: [totalX1 + lineWidth * (level - 1), coodObjY[level]],
              meta: {
                name: item.departmentName,
                time: item.feedbackDate || item.auditDate,
                // auditDate:item.auditDate,
                userName: item.feedBackName || item.reviewerName,
                state: item.orgType == 2 && item.state == 4 ? 8 : item.state, //主送部门审核完流程结束没有反馈
                departmentId: item.departmentId,
                type: 'feedback-feedback',
                feedbackIdea: item.feedbackIdea,
                riskAppendixFile: item.riskAppendixFile,
              },
            });
            if (startId) {
              linkList.push({
                id: `_${this_.uuidv4()}`,
                startId: startId,
                endId: nodeId1,
                startAt: [totalX1 + boxWidth, 20],
                endAt: [0, 20],
                meta: null,
              });
            }
          }
          if (item.children && item.children.length) {
            getChildrenNode(item.children, nodeId1, level);
          }
        });
      }
      console.log(99)
      getChildrenNode(flowData.feedbackListCOPY, '', 0);
      this.nodeList.nodeList = nodeList;
      this.nodeList.linkList = linkList;
    },
    uuidv4() {
      return "xxxxxxxxxxxxyxxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        let r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
  },
  created() {
    // this.initNodeSign2();
    this.initNodeFeedbackFn();

  }

}
</script>

<style>
.container {
  height: 2000px;
  /* width: 1000px; */
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}
.menuFlow {
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
}
.menu_node {
  height: 100%;
  line-height: 50px;
  text-align: center;
}
.super-flow {
  width: 100%;
  height: 100%;
}
.flow {
  font-size: 12px;
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #f5f5f5;
  overflow: auto;
}
.flow-node {
  padding: 10px;
}
.node_item {
  margin-bottom: 10px;
}
.node_detail {
  color: blue;
}
</style>
